<!-- 线上派车 -->
<template>
    <el-dialog v-el-drag-dialog="{ drag: true, full: true, resize: false }" :visible="true" :close-on-click-modal="false"
        :append-to-body="true" @close="closeMd" width="1200px" custom-class="dis-car-md">
        <template slot="title">
            <b>汽车智选</b>
            <span class="c-red" v-if="xsdg.ps.sendOrderNum.length > 1">（本次可派 {{ xsdg.ps.sendOrderNum.length }} 辆车，还可选择
                {{ optionalCarCount }} 辆车）</span>
            <span v-if="myData.orders[0].regularCar == 1" class="c-red"> 本单指定用车{{ myData.orders[0].needSeats }}座</span>
        </template>

        <el-tabs v-model="activeName">
            <el-tab-pane label="线上派车" name="online-tab" v-if="myData.disType == 0 || myData.disType == 1">
                <div ref="dgtools" class="filter-container">
                    <!-- <div class="dgts-fm" v-if="xsdg.kt.dgListTip"><span class="c-yellow">提示：{{xsdg.kt.dgListTip}}</span></div> -->

                    <div class="dgts-fm">
                        <el-form :inline="true">
                            <el-form-item>
                                <el-select v-model="xsdg.ps.runArea" :placeholder="'运营区域'" style="width: 140px">
                                    <el-option v-for="(it, index) in xsfm.runAreas" :key="index" :label="it.label"
                                        :value="it.val">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="xsdg.ps.seats" multiple collapse-tags :multiple-limit="1"
                                    :placeholder="'座位数'" :filterable="false" style="width: 145px">
                                    <!-- <el-option :label="'全部车辆'" :value="''" @click.native="selAllSeats"></el-option> -->
                                    <el-option v-for="(it, index) in xsfm.seatsList" :key="index" :label="it.label"
                                        :value="it.val">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="xsdg.ps.carColor" :placeholder="'车辆颜色'" :filterable="true"
                                    style="width: 100px">
                                    <el-option v-for="(it, index) in xsfm.carColorList" :key="index" :label="it.label"
                                        :value="it.val">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <!-- <el-select
                            v-model="xsdg.ps.searchModel" 
                            :placeholder="'查询模式'"
                            :filterable="true"
                            style="width: 100px"
                        >
                            <el-option :label="'可套车辆'" :value="1"></el-option>
                            <el-option :label="'可顶车辆'" :value="2"></el-option>
                            <el-option :label="'临空车辆'" :value="3"></el-option>
                        </el-select> -->

                            <el-form-item>
                                <el-select v-model="xsdg.ps.haveDriver" :placeholder="'有无驾驶员'" style="width: 100px">
                                    <el-option :label="'无驾驶员'" :value="0"></el-option>
                                    <el-option :label="'有驾驶员'" :value="1"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="xsdg.ps.plateNum" multiple collapse-tags :placeholder="'车牌号'"
                                    :filterable="true" style="width: 170px">
                                    <el-option v-for="(it, index) in xsfm.plateNumList" :key="index" :label="it.label"
                                        :value="it.val">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="xsdg.ps.searchType" :placeholder="'查询类型'" style="width: 120px">
                                    <el-option :label="'最快到达'" :value="0"></el-option>
                                    <el-option :label="'闲时最短'" :value="1"></el-option>
                                    <el-option :label="'空驶最短'" :value="2"></el-option>
                                    <el-option :label="'天数最少'" :value="3"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-select v-model="xsdg.ps.haveReserve" :placeholder="'是否包含预留'" style="width: 120px">
                                    <el-option :label="'不包含预留'" :value="0"></el-option>
                                    <el-option :label="'包含预留'" :value="1"></el-option>
                                </el-select>
                            </el-form-item>

                            <!-- <el-select
                            v-model="xsdg.ps.sequence" 
                            :placeholder="'排序'"
                            style="width: 80px"
                        >
                            <el-option :label="'顺序'" :value="'ASC'"></el-option>
                            <el-option :label="'倒序'" :value="'DESC'"></el-option>
                        </el-select> -->

                            <el-form-item>
                                <el-input v-model.number="xsdg.ps.coverTime" placeholder="重叠时间" style="width: 100px;">
                                    <span slot="suffix">分钟</span>
                                </el-input>
                            </el-form-item>

                            <el-button type="primary" icon="el-icon-search" :disabled="xsdg.kt.sb.load || xsdg.kd.sb.load"
                                @click="findDgList">搜索</el-button>
                        </el-form>
                    </div>
                </div>

                <el-table :ref="xsdg.kt.tbName" :data="xsdg.kt.list" v-loading="xsdg.kt.loading" border fit :height="350"
                    :max-height="600" @selection-change="selXsRowChange($event, 1)"
                    style="width: 100%;margin-bottom: 20px;">
                    <template slot="empty">
                        <span class="c-green" v-if="xsdg.kt.dgListTip">提示：{{ xsdg.kt.dgListTip }}</span>
                        <span v-else class="c-green">未查询到可套车辆</span>
                    </template>

                    <el-table-column type="selection" width="40"></el-table-column>
                    <el-table-column prop="plateNum" label="车牌号" :resizable="false" align="center" width="125">
                        <template slot-scope="{row}">
                            <b>{{ row.plateNum }}</b> <b v-if="row.isRestricted == 1" style="color: red;">(限号)</b> <b>/{{
                                row.seats }}</b>
                            <el-button style="width: 50px;" type="primary" size="mini"
                                @click.native="onlineDisCar(row)">派车</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="driverInfo" label="驾驶员" width="60">
                        <template slot-scope="{row}">
                            <template v-if="row.driverInfo">{{ row.driverInfo.split(',')[0] }}</template>
                        </template>
                    </el-table-column>

                    <el-table-column prop="stayStation" label="停靠点" width="70">
                        <template slot-scope="props">{{ props.row.stayStation }}</template>
                    </el-table-column>

                    <el-table-column prop="lastPosition" label="上一单行程">
                        <template slot-scope="{row}">{{ row.lastPosition }}</template>
                    </el-table-column>

                    <el-table-column prop="fastTime" label="最快到达" :resizable="false" align="center" width="70">
                        <template slot-scope="props">{{ props.row.fastTime }}</template>
                    </el-table-column>

                    <el-table-column prop="restTime" label="闲时最短" :resizable="false" align="center" width="70">
                        <template slot-scope="{row}">
                            <span :class="{ 'c-red': row.restTime.indexOf('-') != -1 }">{{ row.restTime }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="distance" label="空驶最短" :resizable="false" width="70">
                        <template slot-scope="props">{{ props.row.distance }}</template>
                    </el-table-column>

                    <el-table-column prop="outDay" label="天数最少" :resizable="false" align="center" width="70">
                        <template slot-scope="props">{{ props.row.outDay }}</template>
                    </el-table-column>

                    <el-table-column prop="note" :resizable="false">
                        <template slot="header">
                            下一单行程
                            <span style="float: right;">
                                <el-tag v-if="xsdg.kt.list.length > 0"><b :style="{ 'color': '#008000' }">可套车辆 </b>共
                                    {{ xsdg.kt.list.length }} 辆</el-tag>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- <el-divider :style="{'background-color': '#ff6300 !importent'}"></el-divider> -->

                <el-table :ref="xsdg.kd.tbName" :data="xsdg.kd.list" v-loading="xsdg.kd.loading" border fit :height="350"
                    :max-height="600" @selection-change="selXsRowChange($event, 2)" style="width: 100%;">
                    <template slot="empty">
                        <span class="c-red" v-if="xsdg.kd.dgListTip">提示：{{ xsdg.kd.dgListTip }}</span>
                        <span v-else class="c-red">未查询到可顶车辆</span>
                    </template>

                    <el-table-column type="selection" width="40"></el-table-column>
                    <el-table-column prop="plateNum" label="车牌号" :resizable="false" align="center" width="125">

                        <template slot-scope="{row}">
                            <b>{{ row.plateNum }}</b> <b v-if="row.isRestricted == 1" style="color: red;">(限号)</b> <b>/{{
                                row.seats }}</b>
                            <el-button style="width: 50px;" type="primary" size="mini"
                                @click.native="onlineDisCar(row)">派车</el-button>
                            <el-button type="primary" size="mini" @click.native="onlineDisCar(row, 1)">强派</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="driverInfo" label="驾驶员" width="60">
                        <template slot-scope="{row}">
                            <template v-if="row.driverInfo">{{ row.driverInfo.split(',')[0] }}</template>
                        </template>
                    </el-table-column>

                    <el-table-column prop="stayStation" label="停靠点" width="70">
                        <template slot-scope="props">{{ props.row.stayStation }}</template>
                    </el-table-column>

                    <el-table-column prop="lastPosition" label="上一单行程">
                        <template slot-scope="{row}">{{ row.lastPosition }}</template>
                    </el-table-column>

                    <el-table-column prop="fastTime" label="最快到达" :resizable="false" align="center" width="70">
                        <template slot-scope="props">{{ props.row.fastTime }}</template>
                    </el-table-column>

                    <el-table-column prop="restTime" label="闲时最短" :resizable="false" align="center" width="70">
                        <template slot-scope="props">{{ props.row.restTime }}</template>
                    </el-table-column>

                    <el-table-column prop="distance" label="空驶最短" :resizable="false" width="70">
                        <template slot-scope="props">{{ props.row.distance }}</template>
                    </el-table-column>

                    <el-table-column prop="outDay" label="天数最少" :resizable="false" align="center" width="70">
                        <template slot-scope="props">{{ props.row.outDay }}</template>
                    </el-table-column>

                    <el-table-column prop="note" :resizable="false">
                        <template slot="header">
                            下一单行程
                            <span style="float: right;">
                                <el-tag v-if="xsdg.kd.list.length > 0"><b :style="{ 'color': '#f00' }">可顶车辆 </b>共
                                    {{ xsdg.kd.list.length }} 辆</el-tag>
                            </span>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- <div style="text-align: center;margin: 10px;">
                <el-button type="success" @click.native="submitForm" :disabled="xsfm.sb.load">{{xsfm.sb.text}}</el-button>
                <el-button type="info" @click.native="closeMd">取 消</el-button>
            </div> -->
            </el-tab-pane>

            <el-tab-pane label="线下派车" name="underline-tab" v-if="myData.disType == 0 || myData.disType == 2">
                <div ref="dgtools" class="filter-container">
                    <div class="dgts-fm" style="min-height: 400px; overflow-y: auto;">
                        <el-form :model="xxfm.ps" :ref="xxfm.fname" :inline="true">
                            <fragment v-for="(obj, index) in xxfm.ps.underInfo" :key="obj.sendOrderNum">
                                <el-row>
                                    <el-form-item label="行程简称：" :prop="`underInfo.${index}.routeSimpleName`"
                                        style="margin-bottom: 0;"><span style="vertical-align: -4px;">{{ obj.routeSimpleName
                                        }}</span></el-form-item>
                                </el-row>

                                <el-row>
                                    <el-form-item label="" :prop="`underInfo.${index}.suppUserUname`" :rules="[
                                        { required: true, message: '请选择线下车队', trigger: 'blur' },
                                    ]">
                                        <el-select v-model="obj.suppUserUname" clearable filterable :placeholder="'线下车队'"
                                            style="width: 300px">
                                            <el-option v-for="it in xxfm.underlineCarTeamList" :key="it.id"
                                                :label="it.unitName" :value="it.baseUserId.uname"
                                                @click.native="getDutyList(it, index)"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="" :prop="`underInfo.${index}.suppDutyUname`" :rules="[
                                        { required: true, message: '请选择业务负责人', trigger: 'blur' },
                                    ]">
                                        <el-select v-model="obj.suppDutyUname" :placeholder="'业务负责人'" :filterable="false"
                                            style="width: 150px">
                                            <el-option v-for="(it, index) in xxfm.businessLeaderList" :key="index"
                                                :label="it.label" :value="it.val"></el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="" :prop="`underInfo.${index}.sendPlateNum`" :rules="[
                                        { required: true, message: '请输入车牌号', trigger: 'blur' },
                                        { maxlength: 8, message: '车牌号最多8位', trigger: 'blur' },
                                    ]">
                                        <el-input v-model="obj.sendPlateNum" placeholder="车牌号" style="width: 120px;"
                                            @keyup.native="plateNumToUpCase(index)"></el-input>
                                    </el-form-item>

                                    <el-form-item label="" :prop="`underInfo.${index}.driverName`" :rules="[
                                        { required: true, message: '请输入师傅姓名', trigger: 'blur' },
                                        { maxlength: 10, message: '师傅姓名最多10个字符', trigger: 'blur' },
                                    ]">
                                        <el-input v-model="obj.driverName" placeholder="师傅姓名"
                                            style="width: 120px;"></el-input>
                                    </el-form-item>

                                    <el-form-item label="" :prop="`underInfo.${index}.driverPhone`" :rules="[
                                        { required: true, message: '请输入师傅电话', trigger: 'blur' },
                                        { validator: isPhone, trigger: 'blur' }
                                    ]">
                                        <el-input v-model="obj.driverPhone" placeholder="师傅电话" maxlength="11"
                                            style="width: 120px;"></el-input>
                                    </el-form-item>

                                    <el-form-item label="" :prop="`underInfo.${index}.driverGath`" :rules="[
                                        { required: false, message: '请输入师傅现收', trigger: 'blur' },
                                        { validator: isFloat, trigger: 'blur' }
                                    ]">
                                        <el-input v-model.number="obj.driverGath" placeholder="师傅现收"
                                            style="width: 120px;"><span slot="suffix">元</span></el-input>
                                    </el-form-item>

                                    <el-form-item label="" :prop="`underInfo.${index}.sendPrice`" :rules="[
                                        { required: true, message: '请输入派单价格', trigger: 'blur' },
                                        { validator: isFloat, trigger: 'blur' }
                                    ]">
                                        <el-input v-model.number="obj.sendPrice" placeholder="派单价格"
                                            style="width: 120px;"><span slot="suffix">元</span></el-input>
                                    </el-form-item>
                                </el-row>
                            </fragment>
                        </el-form>
                    </div>
                </div>
                <div style="text-align: center;margin: 10px;border-top: 1px solid #efefef;padding-top: 10px;">
                    <el-button type="primary" :disabled="xxfm.sb.load" @click.native="submitXxFm">{{ xxfm.sb.text
                    }}</el-button>
                    <el-button type="info" @click.native="closeMd">取 消</el-button>
                </div>
            </el-tab-pane>

            <el-tab-pane label="智能匹配" name="znpp-tab" v-if="myData.disType == 0 || myData.disType == 3">
                <div ref="dgtools" class="filter-container cur-route-detail">
                    <div class="dgts-row" v-if="oneOrder">
                        <b>{{ oneOrder.routeSimpleName }}</b>
                        <el-divider direction="vertical"></el-divider>
                        <b>{{ oneOrder.stime | time('yyyy年MM月dd日 HH:mm') }}</b>
                        <el-divider direction="vertical"></el-divider>
                        <b>{{ oneOrder.etime | time('yyyy年MM月dd日 HH:mm') }}</b>
                        <el-divider direction="vertical"></el-divider>
                        <el-tooltip effect="dark" :content="oneOrder.routeDetail" placement="bottom">
                            <b class="sl route-detail-text">{{ oneOrder.routeDetail }}</b>
                        </el-tooltip>
                        <el-divider direction="vertical"></el-divider>
                        <b>{{ oneOrder.customers }}人</b>
                        <el-divider direction="vertical"></el-divider>
                        <b>{{ oneOrder.needSeats }}座</b>
                    </div>

                    <div class="dgts-fm">
                        <el-form :inline="true">
                            <el-form-item label="筛选车型">
                                <el-input v-model="znpp.ps.carSeats"
                                    onblur="value=(value.replace(/\D/g,'')==''?'':parseInt(value))" maxlength="5"
                                    placeholder="请输入" clearable style="width: 100px;">
                                    <b slot="suffix" class="c-333">座</b>
                                </el-input>
                            </el-form-item>

                            <el-form-item label="目标结束时间加">
                                <el-select v-model="znpp.ps.timeExpand" placeholder="请选择" clearable style="width: 100px">
                                    <el-option label="6小时" value="0.25"></el-option>
                                    <el-option label="12小时" value="0.5"></el-option>
                                    <el-option label="24小时" value="1"></el-option>
                                    <el-option label="48小时" value="2"></el-option>
                                    <el-option label="72小时" value="3"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="优先条件">
                                <el-select v-model="znpp.ps.firstExpand" placeholder="请选择" clearable style="width: 180px">
                                    <el-option label="出发时间差值" value="1"></el-option>
                                    <el-option label="行程耗时" value="2"></el-option>
                                    <el-option label="出发时间差值+行程耗时" value="3"></el-option>
                                    <el-option label="座位数" value="4"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="平均速度">
                                <el-select v-model="znpp.ps.pdSpeed" placeholder="请选择" clearable style="width: 120px">
                                    <el-option label="40公里/小时" value="40"></el-option>
                                    <el-option label="50公里/小时" value="50"></el-option>
                                    <el-option label="60公里/小时" value="60"></el-option>
                                    <el-option label="70公里/小时" value="70"></el-option>
                                    <el-option label="80公里/小时" value="80"></el-option>
                                </el-select>
                            </el-form-item>

                            <!-- <el-form-item label="重叠时间">
                            <el-select v-model="znpp.ps.coverTime" clearable filterable placeholder="请选择"
                                        style="width: 120px;">
                                        <el-option v-for="it in znpp.times" :key="it" :label="it + '分钟'" :value="it">
                                        </el-option>
                                    </el-select>
                                </el-form-item>-->

                            <el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="getZnppDgList"> 查询

                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <el-divider class="seled-order-line"><b class="c-blue">已选订单</b></el-divider>
                    <div class="dgts-fm selected-order-list">
                        <ul>
                            <li v-for="(it, i) in znpp.seledList" :key="it.orderNum">
                                <i class="el-icon-delete c-blue" title="点击删除"
                                    v-if="i !== 0 && i === znpp.seledList.length - 1" @click="seledZnppRow(it, 0)">
                                </i>
                                <label>{{ i + 1 }}、</label>
                                <span class="simple-title">{{ it.routeSimpleName }}</span>
                                <span>{{ it.pteTime.split('=')[0].slice(11, 16) }}</span>
                                <span>{{ it.spoint.split(' ')[1] }}</span>
                                <span> → </span>
                                <span>{{ it.pteTime.split('=')[1].slice(11, 16) }}</span>
                                <span>{{ it.epoint.split(' ')[1] }}</span>
                                <span>{{ it.customers }}人</span>
                                <span>{{ it.needSeats }}座</span>
                                <!-- <span v-if="it.positionNote">备注：{{ it.positionNote }}</span> -->
                            </li>
                        </ul>
                    </div>
                </div>

                <el-table :cell-style="cellStyle" :ref="znpp.tbName" :data="znpp.list" v-loading="znpp.loading" border fit
                    :height="350" :max-height="600" style="width: 100%;margin-bottom: 20px;">
                    <template slot="empty">
                        <span class="c-green" v-if="znpp.dgListTip">提示：{{ znpp.dgListTip }}</span>
                        <span v-else class="c-green">未查询到可套车辆</span>
                    </template>

                    <el-table-column prop="action" label="操作" :resizable="false" align="center" width="60">
                        <template slot-scope="{row}">
                            <el-button type="text" @click="seledZnppRow(row, 1)">选择</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="routeSimpleName" label="行程简称" :resizable="false" width="90">
                    </el-table-column>

                    <el-table-column prop="stime" label="出发时间" :resizable="false" width="120">
                        <template slot-scope="{row}">
                            <span>{{ row.pteTime.split('=')[0] | time }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="spoint" label="出发地点">
                    </el-table-column>

                    <el-table-column prop="epoint" label="结束地点">
                    </el-table-column>

                    <el-table-column prop="etime" label="结束时间" :resizable="false" width="120">
                        <template slot-scope="{row}">
                            <span>{{ row.pteTime.split('=')[1] | time }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="customers" label="人数" :resizable="false" width="90">
                        <template slot-scope="{row}">
                            <span>{{ row.customers }}人</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="needSeats" label="需求车型" :resizable="false" width="90">
                        <template slot-scope="{row}">
                            <span>{{ row.needSeats }}座</span>
                        </template>
                    </el-table-column>

                    <el-table-column prop="disNote" label="备注" width="80">
                        <template slot-scope="{row}">
                            <el-popover v-if="row.disNote" placement="left" title="备注" width="200" trigger="hover"
                                :content="row.positionNote">
                                <el-button 
                                    slot="reference" 
                                    type="text"
                                    :class="row.disNote == '无法到达' ? 'c-red' : ''">
                                    {{ row.disNote }}
                                </el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>

                <div style="text-align: center;">
                    <el-button type="primary" icon="el-icon-check" :disabled="znpp.sb.load" @click="getZnDisCarList">
                        选择车辆
                    </el-button>
                    <el-button type="info" icon="el-icon-close" @click.native="closeMd">
                        取 消
                    </el-button>
                </div>
            </el-tab-pane>

        </el-tabs>

        <ZnDisCarList v-if="znDisCarListMd.state" :myData="znDisCarListMd" @myClick="setZnDisCarListMd" />
    </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog';
import DataGridBase from '@/views/mixins/DataGridBase';
import ZnDisCarList from './zn-dis-car-list';

import * as orderService from '@/api/services/order.service';
import * as commService from '@/api/services/common.service';

export default {
    name: 'DisCar',
    mixins: [DataGridBase],
    directives: { elDragDialog },
    components: { ZnDisCarList },
    props: { myData: Object },
    data() {
        return {
            // 当前tab选中key
            activeName: 'online-tab',
            // 选择的多条子订单对象
            orders: this.myData.orders || [],
            // 第一个订单
            oneOrder: this.myData.orders[0] || null,

            // 线上派单-表单参数对象
            xsfm: {
                fname: 'onlineFm',
                sb: { load: false, text: '确认派车' },

                // 此处最小车型任一一个
                minSeats: this.myData.orders[0].needSeats,
                // 运营区域
                runAreas: [
                    { val: '', label: '运营区域（全部）' },
                    { val: 'COUNTY_SER', label: '县际业务' },
                    { val: 'CITY_SER', label: '市际业务' },
                    { val: 'PROVINCE_SER', label: '省际业务' },
                ],
                // 车队所有车辆座位数列表
                seatsList: [],
                // 车队所有车辆颜色列表
                carColorList: [],
                // 车队所有车牌号
                plateNumList: [],
            },
            // 线上派单-列表参数对象
            xsdg: {
                // 可套车辆
                kt: {
                    tbName: 'onlineKtTb',
                    // 搜索按钮对象
                    sb: { load: false, text: '搜索' },
                    // 所选行数组
                    selRows: [],
                    list: [],
                    loading: false,
                    // 数据请求提示
                    dgListTip: '',
                },

                // 可顶车辆
                kd: {
                    tbName: 'onlineKdTb',
                    // 搜索按钮对象
                    sb: { load: false, text: '搜索' },
                    // 所选行数组
                    selRows: [],
                    list: [],
                    loading: false,
                    // 数据请求提示
                    dgListTip: '',
                },
                // 所有所选行数组
                allSelRows: [],
                ps: { // 过滤参数
                    page: 1, row: 100,

                    // 订单号 eg:[O120200806095606553]
                    sendOrderNum: [],

                    // 派单座位数（可多选），如果是多单，所有订单的车型也一样的，所以任意取一个即可
                    seats: [this.myData.orders[0].needSeats + ''],

                    // 运营区域，多个逗号拼接，默认为空 eg:COUNTY_SER县际业务 CITY_SER市际业务 PROVINCE_SER省际业务
                    runArea: '',

                    // 车身颜色 eg:red,blue
                    carColor: '',

                    // 查询车牌号，多个逗号拼接，可为空
                    plateNum: [],

                    // 查询模式:1可套车辆 2可顶车辆
                    searchModel: 1,

                    // 有无主驾 0-无主驾 1-有主驾 默认：1
                    haveDriver: 1,

                    // 查询类型：0最快到达 1闲时最短 2空驶最短 3天数最少
                    searchType: 0,

                    // 是否包含预留车辆 eg:0(默认不包含) 1包含
                    haveReserve: 0,

                    // 排序 ASC升序(默认) DESC降序
                    sequence: 'ASC',

                    // 重叠时间
                    coverTime: '15',
                },
            },


            // 线下派单-表单参数对象
            xxfm: {
                fname: 'underlineFm',
                sb: { load: false, text: '派车' },
                ps: {
                    underInfo: []
                },
                // 线下车队列表
                underlineCarTeamList: [],
                // 业务负责人列表
                businessLeaderList: []
            },
            // 线下派单-列表参数对象
            // xxdg: {
            //     dgName: 'xxdg',
            //     tbName: 'underlineDisCarTb',
            //     list: [],
            // },

            // 智能匹配-列表参数对象
            znpp: {
                tbName: 'znppTb',
                // 搜索按钮对象
                sb: { load: false },
                list: [],
                loading: false,
                dgListTip: '',
                ps: { // 过滤参数
                    page: 1, rows: 100,

                    // 目标座位数，默认为已选订单的最大座位数 eg：30
                    seats: null,
                    // 筛选座位数，人工输入的座位数 eg：30
                    carSeats: null,
                    //当前最后一个订单行程时间格式：开始时间=结束时间 eg：2020-08-05 20:50:13=2020-08-07 20:50:13
                    pteTime: null,
                    // 当前最后一个订单经纬度格式：起点=终点 eg：104.141535,30.628873=104.065943,30.60511
                    lonAndLat: null,
                    // 目标结束时间加上多少天，页面用小时显示 eg：6小时传值0.25;12小时传值0.5;24小时传值1(默认);48小时传值2;72小时传值3
                    timeExpand: null,
                    // 优先条件 eg：1出发时间差值从小到大排序(默认) 2行程耗时从小到大排序  3(出发时间差值+行程耗时)从小到大排序 4座位数从小到大排序
                    firstExpand: '1',
                    // 不包含的订单号，即已经选择匹配的订单号，多个逗号拼接，默认是当前订单号 eg：O120200806095606552,O120200806095606553
                    orderNum: null,
                    // 用派单页面的平均速度，可传值40，50，60，70，80 eg：40
                    pdSpeed: '40',
                    // 重叠时间
                    //coverTime: 60,
                },
                // 所选订单列表
                seledList: [],

                // 重叠时间数
                //times: [15, 30, 45, 60, 90, 120, 150, 180],
            },

            // 智能派车列表
            znDisCarListMd: { state: false },

        }
    },
    // 计算属性
    computed: {
        // 还可选择的车辆数
        optionalCarCount: function () {
            let c = this.xsdg.ps.sendOrderNum.length - this.xsdg.allSelRows.length;
            return c < 0 ? 0 : c;
        }
    },
    created() {
        console.log('父组件传入的数据', this.myData);
        const that = this;

        that.getAllSeatsAndColor();
        that.getAllPlateNumList();

        that.getUnderlineCarTeamList();

        if (that.orders.length > 0) {
            // 设置-默认tab
            if (that.myData.disType == 2) that.activeName = 'underline-tab';

            // 遍历设置订单编号和车型
            that.orders.forEach(it => {
                // 线上派车数据保存
                if (that.myData.disType == 0 || that.myData.disType == 1) {
                    that.xsdg.ps.sendOrderNum.push(it.orderNum);
                }

                // 线下派车数据保存
                if (that.myData.disType == 0 || that.myData.disType == 2) {
                    that.xxfm.ps.underInfo.push({
                        // 行程简称
                        routeSimpleName: it.routeSimpleName,
                        // 派单订单号
                        sendOrderNum: it.orderNum,
                        // 供车方单位uname（线下车队）
                        suppUserUname: '',
                        // 供车方操作员uname（业务负责人）
                        suppDutyUname: '',
                        // 车牌号
                        sendPlateNum: '',
                        // 师傅姓名
                        driverName: '',
                        // 师傅手机号
                        driverPhone: '',
                        // 师傅现收金额
                        driverGath: '',
                        // 派单价格
                        sendPrice: '',
                    });
                }
            });
        }

        // 处理订单数据
        if (that.oneOrder) {
            // 处理行程详情数据
            that.oneOrder.routeDetail = that.oneOrder.routeDetail.replace(/<br \/>/g, '');
            
            // 设置查询条件参数
            let { routeSimpleName, customers, needSeats, stime, etime, dayMps, orderNum } = that.oneOrder;
            let no = {
                orderNum,
                routeSimpleName,
                customers,
                needSeats,
                pteTime: stime + '=' + etime,
                lonAndLat: dayMps[0].spoint.lngLat + '=' + dayMps[0].epoint.lngLat,
                spoint: dayMps[0].spoint.address,
                epoint: dayMps[0].epoint.address
            };
            that.znpp.seledList.push(no);
            that.setZnppPs(no);

            // 获取智能匹配的数据
            that.getZnppDgList();
        }

    },
    methods: {
        cellStyle({ row, column, rowIndex, columnIndex }) {

            if (column.label == "需求车型" && row.regularCar == 1) {
                return { 'border': '2px solid red' };
            }


        },
        closeMd() { // 关闭弹框
            this.$emit('myClick', { state: false });
        },
        /** 选中数据改变事件 */
        selXsRowChange(selection, index) {
            const that = this, dg = that.xsdg;

            // console.log('选择的车辆数组', selection, index);

            if (index == 1) {// 可套列表选择
                dg.kt.selRows = selection;
            } else if (index == 2) {// 可顶列表选择
                dg.kd.selRows = selection;
            }

            // 合并两个列表所选择
            dg.allSelRows = dg.kt.selRows.concat(dg.kd.selRows);

            console.log('最后选择的车辆数组', dg.allSelRows);
        },
        /** 选择全部订单状态 */
        selAllSeats() {
            const that = this;

            if (that.xsdg.ps.seats.length >= that.xsfm.seatsList.length + 1) {
                // 全选，则取消全选
                that.xsdg.ps.seats = [];
            } else {
                that.xsdg.ps.seats = [];
                // 未全选，则全选
                that.xsfm.seatsList.forEach(it => {
                    if (it) that.xsdg.ps.seats.push(it.val)
                });
            }
        },
        // 获取-可套-列表数据
        getKtDgList(p) {
            let that = this, U = that.U, dg = that.xsdg, fm = that.xsfm;

            let ps = p ? p : U.scopy(that.xsdg.ps);

            // 可套车辆
            ps.searchModel = 1;
            // 处理订单号，获取第一个就可以了
            ps.sendOrderNum = ps.sendOrderNum[0];
            // 处理座位数参数 多个逗号拼接
            ps.seats = ps.seats.join(',');
            // 处理车牌
            ps.plateNum = ps.plateNum.join(',');

            // let loading = U.qloading('数据请求中...');
            dg.kt.loading = true, dg.kt.sb.load = true;
            orderService.getCarList(ps).then(res => {
                // U.qclose(loading);
                dg.kt.loading = false, dg.kt.sb.load = false;

                if (!res) { U.qerror('数据请求失败'); } else if (res.code != 1) {
                    dg.kt.list = [];
                } else if (res.data.length > 0) {
                    dg.kt.list = res.data;

                    // 存在数据，清空提示
                    dg.kt.dgListTip = '';
                } else {
                    let is = fm.seatsList.findIndex(it => it.val == ps.seats);
                    if (is != -1) {
                        // 设置提示
                        if (is == fm.seatsList.length - 1) {
                            dg.kt.dgListTip = '订单需求座位数系统已无车、智能推荐车型无适合车辆！';
                        } else {
                            dg.kt.dgListTip = '订单需求座位数系统已无车，智能推荐能接单的车型！';

                            // 存在下一个车型，再次请求数据
                            if (is + 1 <= fm.seatsList.length) {
                                ps.seats = [fm.seatsList[is + 1].val];
                                that.getKtDgList(ps);
                            }
                        }
                    }
                }
            }).catch(() => { /** U.qclose(loading); */ dg.kt.loading = false, dg.kt.sb.load = false; });
        },

        // 获取-可顶车辆-列表数据
        getKdDgList(p) {
            let that = this, U = that.U, dg = that.xsdg, fm = that.xsfm;

            let ps = p ? p : U.scopy(that.xsdg.ps);

            // 可套车辆
            ps.searchModel = 2;
            // 处理订单号，获取第一个就可以了
            ps.sendOrderNum = ps.sendOrderNum[0];
            // 处理座位数参数 多个逗号拼接
            ps.seats = ps.seats.join(',');
            // 处理车牌
            ps.plateNum = ps.plateNum.join(',');

            // let loading = U.qloading('数据请求中...');
            dg.kd.loading = true, dg.kd.sb.load = true;
            orderService.getCarList(ps).then(res => {
                // U.qclose(loading);
                dg.kd.loading = false, dg.kd.sb.load = false;

                if (!res) { U.qerror('数据请求失败'); } else if (res.code != 1) {
                    dg.kd.list = [];
                } else if (res.data.length > 0) {
                    dg.kd.list = res.data;

                    // 存在数据，清空提示
                    dg.kd.dgListTip = '';
                } else {
                    let is = fm.seatsList.findIndex(it => it.val == ps.seats);
                    if (is != -1) {
                        // 设置提示
                        if (is == fm.seatsList.length - 1) {
                            dg.kd.dgListTip = '订单需求座位数系统已无车、智能推荐车型无适合车辆！';
                        } else {
                            dg.kd.dgListTip = '订单需求座位数系统已无车，智能推荐能接单的车型！';

                            // 存在下一个车型，再次请求数据
                            if (is + 1 <= fm.seatsList.length) {
                                ps.seats = [fm.seatsList[is + 1].val];
                                that.getKdDgList(ps);
                            }
                        }
                    }
                }
            }).catch(() => { /**U.qclose(loading);*/ dg.kd.loading = false, dg.kd.sb.load = false; });
        },
        // 查询-车辆列表
        findDgList() {
            let that = this, U = that.U, dg = that.xsdg, ps = that.xsdg.ps;

            let ktps = U.scopy(ps);
            // 可套车辆
            ktps.searchModel = 1;
            // 处理订单号，获取第一个就可以了
            ktps.sendOrderNum = ps.sendOrderNum[0];
            // 处理座位数参数 多个逗号拼接
            ktps.seats = ps.seats.join(',');
            // 处理车牌
            ktps.plateNum = ps.plateNum.join(',');

            // let loading = U.qloading('数据请求中...');
            dg.kt.loading = true, dg.kt.sb.load = true;
            orderService.getCarList(ktps).then(res => {
                // U.qclose(loading);
                dg.kt.loading = false, dg.kt.sb.load = false;

                if (!res) {
                    U.qerror('数据请求失败');
                } else if (res.code != 1) {
                    dg.kt.list = [];
                } else {
                    dg.kt.list = res.data;
                }
            }).catch(() => { /**U.qclose(loading);*/ dg.kt.loading = false, dg.kt.sb.load = false; });


            let kdps = U.scopy(ps);
            // 可顶车辆
            kdps.searchModel = 2;
            // 处理订单号，获取第一个就可以了
            kdps.sendOrderNum = ps.sendOrderNum[0];
            // 处理座位数参数 多个逗号拼接
            kdps.seats = ps.seats.join(',');
            // 处理车牌
            kdps.plateNum = ps.plateNum.join(',');

            // loading = U.qloading('数据请求中...');
            dg.kd.loading = true, dg.kd.sb.load = true;
            orderService.getCarList(kdps).then(res => {
                // U.qclose(loading);
                dg.kd.loading = false, dg.kd.sb.load = false;

                if (!res) {
                    U.qerror('数据请求失败');
                } else if (res.code != 1) {
                    dg.kd.list = [];
                } else {
                    dg.kd.list = res.data;
                }
            }).catch(() => { /**U.qclose(loading);*/ dg.kd.loading = false, dg.kd.sb.load = false; });
        },
        // 获取-车队所有座位数和颜色列表
        getAllSeatsAndColor() {
            let that = this, U = that.U, fm = that.xsfm, dg = that.xsdg;

            orderService.getAllSeatsAndColor({ minSeats: fm.minSeats }).then(res => {
                if (res && res.code == 1) {
                    // 保存车型列表
                    let list = res.seats;
                    list.forEach(it => { fm.seatsList.push({ val: it, label: `${it} 座` }); });

                    // 不存在订单所属座位数，则添加
                    let is = fm.seatsList.findIndex(it => it.val == dg.ps.seats);
                    if (is == -1) fm.seatsList.unshift({ val: dg.ps.seats, label: `${dg.ps.seats} 座` });

                    let colorList = res.carColor;
                    colorList.forEach(it => { fm.carColorList.push({ val: it, label: it }); });

                    // 请求车辆列表
                    that.getKtDgList();

                    // 请求车辆列表
                    that.getKdDgList();
                }
            });
        },
        // 获取-车队所有可用车牌号列表
        getAllPlateNumList() {
            let that = this, fm = that.xsfm;

            orderService.getAllPlateNumList({}).then(res => {
                if (res && res.code == 1) {
                    let list = res.plateNums;
                    list.forEach(it => {
                        fm.plateNumList.push({ val: it, label: it });
                    });
                }
            });
        },
        /**
         * 线上派车（多条）
         * @param {*} row 当前车辆
         * @param {*} type 1-强派 其他-派车
         */
        onlineDisCar(row, type = 0) {
            let that = this, U = that.U, fm = that.xsfm, dg = that.xsdg, rows = dg.allSelRows;

            let resRows = [];

            // 用户没有勾选其他行，则表示用户想要操作当前行
            if (rows.length == 0) {
                resRows.push(row);
            } else {// 用户勾选了其他行，如果当前行没被勾选，则当前行的按钮只作为按钮使用，不会操作当前行的数据
                resRows = rows;
            }

            if (resRows.length > dg.ps.sendOrderNum.length) {
                U.qerror(`本次最多能派${dg.ps.sendOrderNum.length}辆车，但您选择了${rows.length}辆车`);
            } else {
                U.qconfim(`确定${type === 1 ? '强派' : '派车'}吗？`).then(r => {
                    if (r) {
                        fm.sb.load = true;

                        // 处理请求参数
                        let ps = { sendInfo: [] };
                        resRows.forEach((it, index) => {
                            let p = {
                                // 订单号（按照下标获取对应订单号，不分顺序）
                                sendOrderNum: dg.ps.sendOrderNum[index],
                                // 车牌号
                                plateNum: it.plateNum,
                                // 驾驶员账号
                                driverUname: it.driverUname,
                                // 取消订单号，可为空
                                cancelNum: it.cancelNum
                            };
                            // 强派-无需传入此参数
                            if (type === 1) delete p.cancelNum;
                            ps.sendInfo.push(p);
                        });
                        orderService.onlineDisOrder(ps).then(res => {
                            fm.sb.load = false;

                            if (!res) {
                                U.qerror('后台出错，后台请求未返回结果');
                            } else if (res.code != 1) {
                                U.qerror(res.msg);
                            } else {
                                U.qsuccess(res.msg);

                                // 调用父组件方法-重新加载数据
                                that.$emit('reloadDg');

                                // 关闭弹框
                                that.closeMd();
                            }
                        });
                    }
                });
            }
        },
        // 线上派车（2021.9.17，隐藏底部按钮派车，派车按钮移至每行中）
        submitForm() {
            let that = this, U = that.U, fm = that.xsfm, dg = that.xsdg, rows = dg.allSelRows;

            if (rows.length == 0) {
                U.qerror('请至少选择一条数据');
            } else if (rows.length > dg.ps.sendOrderNum.length) {
                U.qerror(`本次最多能派${dg.ps.sendOrderNum.length}辆车，但您选择了${rows.length}辆车`);
            } else {
                fm.sb.load = true;
                let loading = U.qloading('提交中，请稍后...');

                // 处理请求参数
                let ps = { sendInfo: [] };
                rows.forEach((it, index) => {
                    ps.sendInfo.push({
                        // 订单号（按照下标获取对应订单号，不分顺序）
                        sendOrderNum: dg.ps.sendOrderNum[index],
                        // 车牌号
                        plateNum: it.plateNum,
                        // 驾驶员账号
                        driverUname: it.driverUname,
                        // 取消订单号，可为空
                        cancelNum: it.cancelNum
                    });
                });
                orderService.onlineDisOrder(ps).then(res => {
                    fm.sb.load = false;
                    U.qclose(loading);

                    if (!res) {
                        U.qerror('后台出错，后台请求未返回结果');
                    } else if (res.code != 1) {
                        U.qerror(res.msg);
                    } else {
                        U.qsuccess(res.msg);

                        // 调用父组件方法-重新加载数据
                        that.$emit('reloadDg');

                        // 关闭弹框
                        that.closeMd();
                    }
                });
            }
        },


        /*=======线下派车========*/
        /** 驾驶员手机号-验证 */
        isPhone(rule, value, callback) {
            if (value) {
                if (!this.FV.isPhone(value)) {
                    return callback(new Error('手机号格式输入错误'));
                }
            }

            callback();
        },
        /** 驾驶员现收-验证 */
        isFloat(rule, value, callback) {
            if (value) {
                if (!this.FV.isFloat(value)) {
                    return callback(new Error('金额格式输入错误'));
                }
            }

            callback();
        },
        /** 车牌号转大写 */
        plateNumToUpCase(index) {
            this.xxfm.ps.underInfo[index].sendPlateNum = this.FT.upperCase(this.xxfm.ps.underInfo[index].sendPlateNum);
        },
        /** 获取-线下派车列表 */
        getUnderlineCarTeamList() {
            let that = this, fm = that.xxfm;

            // 获取-线下车队列表
            commService.getUnderlineCarTeamList({ cusType: "CARTEAM" }).then(res => {
                if (res && res.code == 1) fm.underlineCarTeamList = res.data;
            });
        },

        /**
         * 获取-业务负责人列表
         * @param obj   线下车队
         * @param index 第几个订单
         */
        getDutyList(obj, index) {
            let that = this, fm = that.xxfm;
            if (!obj.dutyService) {
                fm.businessLeaderList = [];
                fm.ps.underInfo[index].suppDutyUname = '';
            } else {
                fm.businessLeaderList = [{ val: obj.dutyService.split('-')[0], label: obj.dutyService.split('-')[1] }];
                // 默认选中
                fm.ps.underInfo[index].suppDutyUname = fm.businessLeaderList[0].val;
            }
        },

        /** 线下派车-表单提交 */
        submitXxFm() {
            let that = this, U = that.U, FV = that.FV, fm = that.xxfm;

            that.$refs[fm.fname].validate((valid) => {
                if (!valid) {
                    return false;
                } else {
                    console.log('线下派车提交参数', fm.ps);

                    // 参数特殊验证
                    let ps = U.scopy(fm.ps);
                    // 新增驾驶员信息参数
                    ps.underInfo.forEach(it => { it.driverInfo = `${it.driverPhone},${it.driverName}`; });

                    fm.sb.load = true;
                    let loading = U.qloading('提交中，请稍后...');
                    orderService.underlineDisOrder(ps).then(res => {
                        fm.sb.load = false;
                        U.qclose(loading);

                        if (!res || res.code != 1) {
                            U.qerror(res.msg);
                        } else {
                            U.qsuccess(res.msg);

                            // 调用父组件方法-重新加载数据
                            that.$emit('reloadDg');

                            // 关闭弹框
                            that.closeMd();
                        }
                    });
                }
            });
        },

        // 设置智能匹配查询列表参数
        setZnppPs(o) {
            let that = this, ps = that.znpp.ps, { orderNum, needSeats, pteTime, lonAndLat } = o;

            if (o) {
                ps.seats = needSeats + '';
                ps.pteTime = pteTime;
                ps.lonAndLat = lonAndLat;
                // 设置排除订单
                ps.orderNum = that.znpp.seledList.map(it => it.orderNum).join(',');
            }
        },
        // 获取-智能匹配-表格列表
        getZnppDgList() {
            const that = this, U = that.U, dg = that.znpp, ps = U.scopy(dg.ps);

            // 处理参数

            orderService.findZnppPage(ps).then(res => {
                if (res.code == 1) {
                    let list = res.data || [];
                    list.forEach(it => {
                        // 处理派车备注
                        let disNote = it.positionNote;
                        if (disNote) {
                            // 获取备注中的状态（【时间充足】）：距离最后一个已选行程【9.93】公里，时间差【4】小时【41】分钟【时间充足】
                            disNote = disNote.substring(disNote.lastIndexOf('【') + 1, disNote.lastIndexOf('】'));
                        }
                        it.disNote = disNote;
                    });
                    dg.list = list;
                } else {
                    dg.list = [];
                }
            });
        },
        /**
         * 选择订单
         * @param {Object} row 订单对象
         * @param {Number} type 0-删除 1-添加
         */
        seledZnppRow(row, type) {
            const that = this, U = that.U;

            if (type === 0) {
                // 删除最后一项
                that.znpp.seledList.pop();
                // 获取数组新的最后一项
                let lastRow = that.znpp.seledList[that.znpp.seledList.length - 1];
                that.setZnppPs(lastRow);
            } else if (type === 1) {
                let i = that.znpp.seledList.findIndex(it => it.orderNum === row.orderNum);
                if (i !== -1) {
                    return U.qerrorFalse('当前订单已选择！');
                } else {
                    that.znpp.seledList.push(row);
                    that.setZnppPs(row);
                }
            }

            // 获取智能匹配的数据
            that.getZnppDgList();
        },

        // 获取智能派车列表
        getZnDisCarList() {
            let that = this, U = that.U, rows = that.znpp.seledList, { seatsList, carColorList, plateNumList } = that.xsfm;

            if (rows.length == 0) {
                U.qerror('请至少选择一条数据');
            } else if (rows.length > 15) {
                U.qerror(`本次最多能派15条订单`);
            } else {
                // 如果座位数中不存在所选订单的座位数，则加入
                rows.forEach(it => {
                    let is = seatsList.find(a => a.val == it.needSeats);
                    if (!is) seatsList.push({ val: it.needSeats + '', label: `${it.needSeats} 座` });
                })
                console.log('seatsList', seatsList);
                // 处理参数
                let ps = {};

                // 订单号，多个逗号拼接
                ps.sendOrderNum = rows.map(it => it.orderNum) || [];
                // 运营区域
                ps.runArea = '';
                // 派单座位数，如果是多个订单取最大的需求座位数
                ps.seats = [rows.map(it => it.needSeats).sort().reverse()[0] + ''] || [];
                // 车身颜色
                ps.carColor = '';
                // 查询车牌号
                ps.plateNum = [];
                // 是否有主驾，默认1 eg:0无主驾 1有主驾
                ps.haveDriver = 1;
                // 查询模式，默认1:1可套车辆 2可顶车辆 3临空车辆
                ps.searchModel = 1;
                // 查询类型，默认0：0时间最快 1空闲最短 2空驶最短 3出车天数最少
                ps.searchType = 0;
                // ASC升序(默认) DESC降序
                ps.sequence = "ASC";
                // 是否包含预留车辆 eg:0(默认不包含) 1包含
                ps.haveReserve = 0;
                // 重叠时间(分钟) eg:5
                ps.coverTime = '15';


                // 打开选择车辆弹框
                that.setZnDisCarListMd({
                    state: true, ps,
                    seatsList,
                    carColorList,
                    plateNumList
                });
            }
        },

        // 智能派车列表-弹框
        setZnDisCarListMd(e) {
            let that = this, md = that.znDisCarListMd;

            if (!e.state) {// 关闭弹框
                md.ps = null;
                md.state = e.state;
            } else {// 打开弹框
                md.state = e.state;
                md.ps = e.ps;
                md.seatsList = e.seatsList;
                md.carColorList = e.carColorList;
                md.plateNumList = e.plateNumList;
            }
        },

    }

}
</script>

<style lang="less" scoped>
::v-deep .dis-car-md {
    .filter-container .dgts-row {
        line-height: 15px !important;
        margin-bottom: 10px !important;
    }

    .el-tabs__header {
        margin-bottom: 5px !important;
    }

    .el-dialog__body {
        padding-top: 0px !important;
    }

    .cur-route-detail {
        .dgts-row {
            width: 100%;
        }

        .route-detail-text {
            max-width: 680px;
            display: inline-block;
            vertical-align: middle;
        }

        .seled-order-line {
            margin-bottom: 5px;
            margin-top: 15px;
        }

        .selected-order-list {
            ul {
                margin: 5px;
                padding-left: 10px;

                li {
                    padding-left: 30px;
                    position: relative;

                    .el-icon-delete {
                        position: absolute;
                        top: 9px;
                        left: 0px;
                        cursor: pointer;
                        color: #f00000 !important;
                    }

                    list-style: none;

                    span {
                        padding: 0 10px;
                    }

                    .simple-title {
                        width: 100px;
                        display: inline-block;
                    }
                }
            }
        }
    }
}
</style>
